import React, { Component, Fragment } from 'react'
var classNames = require('classnames')
import { HelloWrapper } from './styledIndex'

import './index.styl'

class Index extends Component {
  state = {
    color: 'abc'
  }

  // constructor() {
  //   // 调用一下父类的constructor, 才能使用this
  //   super()
  //   this.state = {
  //     color: 'abc'
  //   }
  // }

  handleClick() {
    // this.state.color = 'def'
    // Vue和React的核心区别
    this.setState({
      color: 'def'
    })
  }

  render() {
    return (
      <Fragment>
        <div className={classNames({ 'abc': true, 'def': true })} style={{fontSize: '30px'}}>
          style
          <button
            onClick={this.handleClick.bind(this)}
          >change color</button>
        </div>
        <HelloWrapper color="purple">
          hello
        </HelloWrapper>
      </Fragment>
    )
  }
}

export default Index;